<template>
  <!-- <scroll-view>
  
  </scroll-view> -->
  <view class="album" :hidden='!album.desc'>
    <view class="album-bg">
      <image :src='album.cover' mode="aspectFill" />
      <view class="album-info">
        <view class="info-name">{{album.name}}</view>
        <view class="info-btn">关注专辑</view>
      </view>
    </view>
    <view class="album-author">
      <view class="author-info">
        <image :src="album.user.avatar" mode="widthFix" />
        <text class="author-name">{{album.user.name}} </text>
      </view>
      <view class="album-desc">{{album.desc}}</view>
    </view>
    <view class="album-list">
      <view class="album-item" v-for="(v,i) in wallpaper" :key="v.id">
        <go-details :list='wallpaper' :index='i'>
          <image :src="v.thumb+v.rule.replace('$<Height>',300)" mode="aspectFill" />
        </go-details>
      </view>
    </view>
  </view>
</template>

<script>
import goDetails from '@/components/goDetails'
export default {
  components: { goDetails },

  data() {
    return {
      params: {
        limit: 30,
        skip: 0,
        order: 'new',
        first: 1
      },
      id: -1,
      hasMore: true,
      wallpaper: [],
      album: {}
    }
  },
  onLoad(option) {
    // this.id = '5d5f8e45e7bce75ae7fb8278'
    this.id = option.id
    console.log(option)
    this.loadList()
  },
  onReachBottom() {
    if (this.hasMore) {
      this.params.first = 0
      this.params.skip += this.params.limit
      this.loadList()
    } else {
      uni.showToast({ title: '没有更多数据了', icon: 'none' })
    }
  },
  methods: {
    async loadList() {
      const { res } = await this.request({ url: `/image/v1/wallpaper/album/${this.id}/wallpaper`, data: this.params })
      console.log(res)
      if (!this.album.name) {
        this.album = res.album
      }
      this.wallpaper.push(...res.wallpaper)
    }
  }
}
</script>

<style  lang='scss'    scoped>
.album-bg {
  height: calc(750rpx / 1.5);
  position: relative;
  image {
    height: 100%;
  }
  .album-info {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10rpx;
    color: #fff;
  }
  .info-btn {
    background-color: $color;
    width: 150rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 10rpx;
  }
}
.album-author {
  padding: 20rpx;
  .author-info {
    display: flex;
    align-items: center;
  }
  image {
    width: 50rpx;
  }
  .author-name {
    margin-left: 30rpx;
    color: #000;
  }
  .album-desc {
    padding: 10rpx 0;
  }
}
.album-list {
  display: flex;
  flex-wrap: wrap;
  .album-item {
    width: 33.33%;
    border: 2rpx solid #fff;
  }
  image {
    height: 150rpx;
  }
}
</style> 